<template>
  <div :id="id" :style="{ height:height,width:width }" />
</template>

<script>
import echarts from "echarts";
export default {
  props: {
    id: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "270px",
    },
    data: {
      type: Array,
      default: () => [],
    },
    title: {
      type: String,
      default: "",
    },
    xAxisData: {
      type: Array,
      default: () => [[
        "2020-07-27",
        "2020-07-28",
        "2020-07-29",
        "2020-07-30",
        "2020-07-31",
        "2020-08-01",
        "2020-08-02",
      ]],
    },
    smooth: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      chart: null,
      legendData: [],
      echartData: [],
    };
  },
  mounted() {
    this.getlegendData();
    this.getData();
    this.initChart();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart = null;
  },
  methods: {
    getlegendData() {
      if (this.data.length === 0) {
        return;
      }
      this.legendData = [];
      this.data.forEach((item, index) => {
        this.legendData.push(item.name);
      });
    },
    getData() {},
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id));
      const option = {
        tooltip: {
          trigger: "axis",
        },
        grid: {
          top: "12%",
          right: "8%",
          left: "10%",
          bottom: "10%",
        },
        legend: {
          show: true,
          top: "-5px",
          left: "center",
          icon: "roundRect",
          textStyle: {
            fontSize: 14,
          },
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 26,
          data: this.legendData,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "2020-07-27",
            "2020-07-28",
            "2020-07-29",
            "2020-07-30",
            "2020-07-31",
            "2020-08-01",
            "2020-08-02",
          ],
          axisLine: {
            lineStyle: {
              color: "#919191",
              width: 0, //这里是为了突出显示加上的
            },
          },
          axisLabel: {
            width: "20px",
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#919191",
              width: 0, //这里是为了突出显示加上的
            },
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            name: "新闻",
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            areaStyle: {
              color: "#fff6eb",
            },
            lineStyle: {
              normal: {
                color: "#ffad3d",
              },
            },
            smooth: this.smooth,
          },
          {
            name: "微信",
            data: [123, 345, 678, 111, 2367, 1234, 890],
            type: "line",
            areaStyle: {
              color: "#eaf1ef",
            },
            lineStyle: {
              normal: {
                color: "#3ebef8",
              },
            },
            smooth: this.smooth,
          },
          {
            name: "微博",
            data: [11, 234, 123, 765, 111, 345, 704],
            type: "line",
            areaStyle: {
              color: "#d5dfe0",
            },
            lineStyle: {
              normal: {
                color: "#7a919d",
              },
            },
            smooth: true,
          },
        ],
        color: ["#ffad3d", "#3ebef8", "#7a919d"],
      };
      this.chart.setOption(option);
    },
  },
  watch: {
    data: {
      handler(newVal, oldVal){
        console.log("监听：", newVal)
        if(this.chart){
          //销毁
          this.chart.dispose();
          if(newVal){
            this.initChart();
          } 
        } else{
          this.initChart();
        }
      },
      deep: true //对象内部属性的监听
    }
  }
};
</script>
